<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天气查询</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(to right, #a8edea, #fed6e3);
            padding: 40px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        input[type="text"] {
            width: 200px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 1px 1px 5px rgba(0,0,0,0.1);
            font-size: 14px;
        }

        button {
            padding: 8px 15px;
            margin-left: 10px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        .weather-box {
            margin-top: 30px;
            padding: 20px;
            border-radius: 10px;
            background-color: #ffffffcc;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 320px;
            transition: transform 0.2s ease;
            margin-left: auto;
            margin-right: auto;
        }

        .weather-box:hover {
            transform: translateY(-5px);
        }

        .weather-box h3 {
            margin-top: 0;
            color: #333;
        }

        .weather-box p {
            margin-top: 10px;
            font-size: 16px;
            color: #555;
        }

        #loading {
            display: none;
            color: #007bff;
            font-style: italic;
            margin-left: 10px;
        }

        @media (max-width: 400px) {
            .weather-box {
                width: 90%;
            }

            input[type="text"], button {
                width: 100%;
                margin-top: 10px;
                display: inline-block;
            }
        }
    </style>
</head>
<body>

<h1>天气查询系统</h1>

<!-- 本地天气展示 -->
<div class="weather-box">
    <h3>当前位置天气：</h3>
    <p id="localWeather">正在加载...</p>
</div>

<!-- 城市天气查询 -->
<div class="weather-box">
    <h3>查询城市天气：</h3>
    <input type="text" id="cityInput" placeholder="输入城市名">
    <button onclick="fetchCityWeather()">查询</button>
    <span id="loading">加载中...</span>
    <p id="cityWeather" style="margin-top:10px;">等待查询结果</p>
</div>

<script>
    // 页面加载时自动获取本地天气
    window.onload = function () {
        fetch('/test/getLocalWeather')
            .then(response => response.text())
            .then(data => {
                document.getElementById('localWeather').innerText = data;
            })
            .catch(err => {
                console.error('获取本地天气失败:', err);
                document.getElementById('localWeather').innerText = '无法获取';
            });
    };

    // 用户点击按钮查询指定城市天气
    function fetchCityWeather() {
        const city = document.getElementById('cityInput').value.trim();
        const loading = document.getElementById('loading');

        if (!city) {
            alert("请输入城市名称");
            return;
        }

        loading.style.display = 'inline';

        const url = `/test/getWeather?cityName=${encodeURIComponent(city)}`;

        fetch(url)
            .then(response => response.text())
            .then(data => {
                document.getElementById('cityWeather').innerText = data;
            })
            .catch(err => {
                console.error('获取城市天气失败:', err);
                document.getElementById('cityWeather').innerText = '无法获取';
            })
            .finally(() => {
                loading.style.display = 'none';
            });
    }
</script>

</body>
</html>
